<template>
  <div class="survey-box">
    <el-row type="flex" justify="space-between" align="middle" class="survey-hedaer">
      <div class="title">转化看板</div>
      <el-link v-if="linkUrl != ''" :underline="false" type="primary" @click="$router.push({ path: linkUrl })">查看详情</el-link>
      <card-header v-else title="" @change="changeOrderTime" />
    </el-row>
    <el-row class="survey-body">
      <el-col :span="12"><place-order /></el-col>
      <el-col :span="12"><pay-order /></el-col>
    </el-row>
  </div>
</template>

<script>
import CardHeader from '../../card/card_header.vue';
import PlaceOrder from './components/place_order.vue';
import PayOrder from './components/pay_order.vue';

export default {
  components: {
    CardHeader,
    PlaceOrder,
    PayOrder
  },
  props: {
    // 指定跳转链接,右侧为查看详情按钮,否则为时间选择
    // 暂未时间按时间选择展示数据
    linkUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: 'today'
    };
  },
  methods: {
    changeOrderTime: function(time) {
      this.time = time;
    }
  }
};
</script>

<style scoped lang="scss">
.survey-box {
  background-color: #fff;
  min-height: 150px;
  margin-bottom: 20px;
  padding: 10px 20px 25px;
  .survey-hedaer {
    margin-bottom: 28px;
    height: 36px;
    padding-right: 20px;
    background-color: #f1f8ff;
    .title {
      color: #303133;
      font-size: 15px;
      padding-left: 6px;
      border-left: 2px solid #5191ff;
    }
  }
}
</style>
